<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--/*@thymesVar id="roles" type="java.util.List<com.weirong.smartvault.backservice.entity_model.RoleModel>"*/-->
<div class="container">
    <div class="well well-lg" style="margin-bottom: 0px;">
        <div align="right" style="margin-bottom:10px">
            <button class="btn btn-primary" data-toggle="modal" data-target=".add">新增</button>
        </div>
        <table class="table table-bordered" style="margin-bottom: 0px;">
            <tr class="info" width="100%">
                <th width="5%">序号</th>
                <th width="12%">角色名称</th>
                <th>说明</th>
                <th width="7%">创建人</th>
                <th width="11%">创建时间</th>
                <th width="20%">操作</th>
            </tr>
            <tr th:each="role,iterstat:${roles}">
                <td th:text="${iterstat.index}">1</td>

                <td th:text="${role.getName()}">系统管理员</td>
                <td th:text="${role.getComment()}"></td>
                <td th:text="${role.getCreatorName()}">系统</td>
                <td th:text="${role.getCreatTime()}"></td>
                <td><a href="#" data-toggle="modal" th:attr="data-target=${'.permissions-view'+role.getId()}">查看权限</a>&nbsp;&nbsp;<a
                        data-toggle="modal" href="#" data-target=".tree-view"
                        th:onclick="'freshTree('+${role.getId()}+')'">设置权限</a>&nbsp;&nbsp;<a
                        th:href="@{/API/delete_role(id=${role.getId()})}">删除</a></td>
            </tr>
        </table>
    </div>
</div>
<div class="modal fade add" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">新增角色</h4>
            </div>
            <form method="post">
                <div class="modal-body">
                    <table style="width: 800px;">
                        <tr>
                            <td colspan="5">&nbsp;</td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td>角色名称</td>
                            <td><input type="text" name="name" placeholder="请输入角色名称" class="form-control"/></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td colspan="5">&nbsp;</td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td>说明</td>
                            <td><textarea name="comment" class="form-control" rows="3"></textarea></td>
                            <td></td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <input type="submit" class="btn btn-primary" value="保存"/>
                </div>
            </form>

        </div>
    </div>
</div>
<div th:each="role:${roles}" th:class="|modal fade permissions-view${role.getId()}|" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">权限查看</h4>
            </div>
            <div class="modal-body">
                <!--/*@thymesVar id="permissionTables" type="java.util.Map<java.lang.Integer,com.weirong.smartvault.backservice.util.table.Table>"*/-->
                <table th:with="table = ${permissionTables.get(role.getId())}" class="table table-bordered"
                       style="margin-bottom: 0px;">
                    <tr class="info">
                        <th>一级菜单权限</th>
                        <th>二级菜单权限</th>
                        <th>三级页面权限</th>
                        <th>按钮及链接权限</th>
                    </tr>
                    <tr th:each="clo,iterstat:${table.range()}">
                        <td th:text="${table.get(0).get(iterstat.index).getContent()}"
                            th:rowspan="${table.get(0).get(iterstat.index).getHeight()}"
                            th:if="${table.get(0).get(iterstat.index).getHeight()>0}">基础数据
                        </td>
                        <td th:text="${table.get(1).get(iterstat.index).getContent()}"
                            th:rowspan="${table.get(1).get(iterstat.index).getHeight()}"
                            th:if="${table.get(1).get(iterstat.index).getHeight()>0}">基础数据
                        </td>
                        <td th:text="${table.get(2).get(iterstat.index).getContent()}"
                            th:rowspan="${table.get(2).get(iterstat.index).getHeight()}"
                            th:if="${table.get(2).get(iterstat.index).getHeight()>0}">基础数据
                        </td>
                        <td th:text="${table.get(3).get(iterstat.index).getContent()}"
                            th:rowspan="${table.get(3).get(iterstat.index).getHeight()}"
                            th:if="${table.get(3).get(iterstat.index).getHeight()>0}">基础数据
                        </td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="tree-view modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">权限设置</h4>
            </div>
            <div class="modal-body">

                <div id="tree"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button id="submit" type="button" onclick="save()" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</div>


<script th:src="@{/js/bootstrap-treeview.min.js}"></script>

<script th:src="@{/js/myjs/special/role.js}"></script>
</html>